<template>
  <div>
    <SuperTable :data-request="fetchData" :columns="baseColumns" header-title="登记记录" pager align="center" border search
      ref="supertable" :export-config="{}"> </SuperTable>
  </div>
  <a-drawer v-model:visible="visible" class="custom-class" style="" width="80%" placement="right">
    <HeaderTitle title="基础信息"></HeaderTitle>
    <a-row style="font-size: 15px; font-width: 700">
      <a-col :span="7"> 登记时间 : {{ formState.createTime }} </a-col>
    </a-row>
    <a-row style="font-size: 15px; font-width: 700">
      <a-col :span="7" :key="item.key" v-for="item in specimenFields"> {{ item.name }} : {{ formState[item.key] }}
      </a-col>
    </a-row>
    <HeaderTitle title="编码信息"></HeaderTitle>
    <ul class="card_wrap">
      <li v-for="item in formState.strainInstanceEntityList" :key="item.epc" class="c_item">{{ item.serial }}</li>
    </ul>
  </a-drawer>
</template>
<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import HeaderTitle from '@/components/headerTitle.vue';
import { VxeGridPropTypes } from 'vxe-table';
import { ref } from 'vue';
import columns, { TableColumnList } from './columns';
import { getcustomerFormData } from '@/api/public';
import { getSpecimensRegister, getdetailed, deletedetailed } from '../../api/takeNotes';
import { Modal } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { addSpecimenType } from '@/libs/utils';
const router = useRouter();
const visible = ref<boolean>(false);
const formState = ref();
const specimenFields = ref([]);
const supertable = ref([]);
let baseColumns: TableColumnList = [
  ...columns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 250,
    actions: ({ row }) => [
      {
        label: '查看',
        // type: 'primary',
        onClick: async () => {
          let res = await getcustomerFormData({ groupId: row.formworkId });
          specimenFields.value = res.result;
          const { result } = await getdetailed(row.id);
          result.extDataList.forEach((item) => {
            if (item.key != 'sampleTime') {
              result[item.key] = item.value;
            }
          });
          formState.value = result;
          visible.value = true;
        },
      },
      {
        label: '编辑',
        // type: 'primary',
        // style: 'margin:0 10px',
        disabled: row.status != 1,
        onClick: async () => {
          // const { result } = await getdetailed(row.id);
          // result.route = 'takeNotes';
          router.push({ name: 'register', query: { id: row.id } });
        },
      },
      {
        label: '删除',
        // type: 'danger',
        disabled: row.status != 1,
        onClick: async () => {
          Modal.confirm({
            title: '您确定要删除吗？',
            onOk: async () => {
              await deletedetailed(row.id);
              supertable.value?.refreshTable();
            },
          });
        },
      },
    ],
  },
];

const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let searchData = supertable.value?.getFormModel();
  const query = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    'orderBy[0].field': 'createTime', // 默认排序字段
    'orderBy[0].order': 'desc', // 默认排序方式
  };
  if (searchData.createTime) {
    query.createTimeBtw = searchData.createTime.join() + ' 23:59:59';
  }
  searchData.projectName ? (query.projectName = searchData.projectName) : '';
  searchData.name ? (query.name = searchData.name) : '';
  const { result } = await getSpecimensRegister(query);
  console.log(result.data, 66);
  addSpecimenType(result.data);
  return result;
};
</script>
<style lang="less" scoped>
.card_wrap {
  // 大盒子
  width: 99%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; // 替代原先的space-between布局方式
}

.c_item {
  // 每个item
  flex: 1;
  height: 28px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 28px;
  /*边框合并*/
  margin: 0 0 -1px -1px;
  width: calc(100% / 10); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
  min-width: calc(100% / 10); // 加入这两个后每个item的宽度就生效了
  max-width: calc(100% / 10); // 加入这两个后每个item的宽度就生效了
}
</style>
